<template>
  <div>
    <el-tabs value="first">
      <el-tab-pane label="企业信息" name="first">
        <el-form size="small" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="170px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="企业名称" prop="supplierName">
                <el-input v-model="dataForm.supplierName" placeholder="企业名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="经营方式" prop="operType">
                <el-input v-model="dataForm.operType" placeholder="经营方式"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="国家" prop="country">
                <el-input v-model="dataForm.country" placeholder="国家"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="证件合一" prop="credentialFlag">
                <el-select v-model="dataForm.credentialFlag" placeholder="请选择" style="width: 100%">
                  <el-option key="1" label="三证合一" value="1"></el-option>
                  <!-- <el-option key="2" label="五证合一" value="2"></el-option> -->
                  <el-option key="3" label="常规" value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="工商注册号" prop="commercialNo" v-if="dataForm.credentialFlag == '3'">
                <el-input v-model="dataForm.commercialNo" placeholder="工商注册号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="组织机构代码" prop="organCode">
                <el-input v-model="dataForm.organCode" placeholder="组织机构代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税务登记证国税编号" prop="countryTaxNo" v-if="dataForm.credentialFlag == '3'">
                <el-input v-model="dataForm.countryTaxNo" placeholder="税务登记证国税编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="税务登记证地税编号" prop="localTaxNo" v-if="dataForm.credentialFlag == '3'">
                <el-input v-model="dataForm.localTaxNo" placeholder="税务登记证地税编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册地址" prop="Province">
                <el-row>
                  <el-col :span="10">
                    <el-cascader ref="cascaderAdd" style="width: 100%" :options="countryoptions" :props="countryprops"
                                 placeholder="省市区" v-model="CityAry" @change="handleAreaChange"></el-cascader>
                  </el-col>
                  <el-col :span="14">
                    <el-input v-model="dataForm.address" props="Address" maxlength="500" placeholder="详细地址" style="width: 100%">
                    </el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编" prop="zipCode">
                <el-input v-model="dataForm.zipCode" placeholder="邮编"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="营业范围" prop="businessScope">
                <el-input v-model="dataForm.businessScope" placeholder="营业范围"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="通信地址" prop="LinkProvince">
                <el-row>
                  <el-col :span="10">
                    <el-cascader ref="cascaderAddrLink" :options="countryoptions" :props="countryprops"
                                 placeholder="省市区" v-model="LinkCityAry" style="width: 100%"
                                 @change="handleLinkAreaChange">
                    </el-cascader>
                  </el-col>
                  <el-col :span="14">
                    <el-input v-model="dataForm.linkAddress" props="LinkAddress" maxlength="500" placeholder="详细地址"
                              style="width: 100%">
                    </el-input>
                  </el-col>
                </el-row>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="邮编" prop="linkZipCode">
                <el-input v-model="dataForm.linkZipCode" placeholder="通信地址-邮编"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="法定代表人姓名" prop="legalPerson">
                <el-input v-model="dataForm.legalPerson" placeholder="法定代表人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="行业类别代码" prop="categoryCode">
                <el-input v-model="dataForm.categoryCode" placeholder="行业类别代码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="行业类别名称" prop="categoryName">
                <el-input v-model="dataForm.categoryName" placeholder="行业类别名称"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="注册资本" prop="regCapital">
                <el-input v-model="dataForm.regCapital" placeholder="注册资本"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="币种" prop="currency">
                <el-input v-model="dataForm.currency" placeholder="币种"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人姓名" prop="contactName">
                <el-input v-model="dataForm.contactName" placeholder="联系人姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司类型" prop="companyType">
                <el-input v-model="dataForm.companyType" placeholder="公司类型"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="开户银行" prop="depositBank">
                <el-input v-model="dataForm.depositBank" placeholder="开户银行"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行账号" prop="bankAccount">
                <el-input v-model="dataForm.bankAccount" placeholder="银行账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="成立时间" prop="setupTime">
                <el-input v-model="dataForm.setupTime" placeholder="成立时间"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="电子邮箱" prop="email">
                <el-input v-model="dataForm.email" placeholder="电子邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="银行信用等级" prop="bankCreditRating">
                <el-input v-model="dataForm.bankCreditRating" placeholder="银行信用等级"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="移动电话" prop="mobile">
                <el-input v-model="dataForm.mobile" placeholder="移动电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="固定电话" prop="telphone">
                <el-input v-model="dataForm.telphone" placeholder="固定电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="传真" prop="fax">
                <el-input v-model="dataForm.fax" placeholder="传真"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司电话" prop="companyTel">
                <el-input v-model="dataForm.companyTel" placeholder="公司电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="QQ号码" prop="qq">
                <el-input v-model="dataForm.qq" placeholder="QQ号码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="公司网址" prop="companyUrl">
                <el-input v-model="dataForm.companyUrl" placeholder="公司网址"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="dataForm.remark" placeholder="备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type="primary" @click="dataFormSubmit()">保存</el-button>
            <el-button @click="$router.go(-1)">返回</el-button>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import supplierApi from '@/api/supplier'
  export default {
    data () {
      return {
        address: [],
        linkaddress: [],
        countryoptions: [],
        countryprops: {
          value: 'adcode',
          label: 'name',
          children: 'districts'
        },
        CityAry: [],
        LinkCityAry: [],
        dataForm: {
          id: 0,
          supplierName: '',
          operType: '',
          country: '',
          credentialFlag: '1',
          commercialNo: '',
          organCode: '',
          countryTaxNo: '',
          localTaxNo: '',
          address: '',
          allAddress: '',
          linkAllAddress: '',
          province: '',
          city: '',
          street: '',
          houseNo: '',
          zipCode: '',
          businessScope: '',
          linkAddress: '',
          linkProvince: '',
          linkCity: '',
          linkStreet: '',
          linkHouseNo: '',
          linkZipCode: '',
          legalPerson: '',
          categoryCode: '',
          categoryName: '',
          regCapital: '',
          currency: '',
          contactName: '',
          companyType: '',
          depositBank: '',
          bankAccount: '',
          setupTime: '',
          email: '',
          bankCreditRating: '',
          mobile: '',
          telphone: '',
          fax: '',
          companyTel: '',
          qq: '',
          companyUrl: '',
          remark: '',
          isDelete: '',
          createOn: '',
          createUserId: '',
          createBy: '',
          modifiedOn: '',
          modifiedUserId: '',
          modifiedBy: ''
        },
        dataRule: {
          supplierName: [
            { required: true, message: '企业名称不能为空', trigger: 'blur' }
          ],
          operType: [
            { required: true, message: '经营方式不能为空', trigger: 'blur' }
          ],
          country: [
            { required: true, message: '国家不能为空', trigger: 'blur' }
          ],
          credentialFlag: [
            { required: true, message: '证件合一标志不能为空', trigger: 'blur' }
          ],
          commercialNo: [
            { required: true, message: '工商注册号不能为空', trigger: 'blur' }
          ],
          organCode: [
            { required: true, message: '组织机构代码不能为空', trigger: 'blur' }
          ],
          countryTaxNo: [
            { required: true, message: '税务登记证国税编号不能为空', trigger: 'blur' }
          ],
          localTaxNo: [
            { required: true, message: '税务登记证地税编号不能为空', trigger: 'blur' }
          ],
          address: [
            { required: true, message: '单位地址不能为空', trigger: 'blur' }
          ],
          allAddress: [
            { required: true, message: '详细地址不能为空', trigger: 'blur' }
          ],
          linkAllAddress: [
            { required: true, message: '详细联系地址不能为空', trigger: 'blur' }
          ],
          province: [
            { required: true, message: '省直辖市不能为空', trigger: 'blur' }
          ],
          city: [
            { required: true, message: '地市区县不能为空', trigger: 'blur' }
          ],
          street: [
            { required: true, message: '街道不能为空', trigger: 'blur' }
          ],
          houseNo: [
            { required: true, message: '门牌号不能为空', trigger: 'blur' }
          ],
          zipCode: [
            { required: true, message: '邮编不能为空', trigger: 'blur' }
          ],
          businessScope: [
            { required: true, message: '营业范围不能为空', trigger: 'blur' }
          ],
          linkAddress: [
            { required: true, message: '通信地址-单位地址不能为空', trigger: 'blur' }
          ],
          linkProvince: [
            { required: true, message: '通信地址-省直辖市不能为空', trigger: 'blur' }
          ],
          linkCity: [
            { required: true, message: '通信地址-地市区县不能为空', trigger: 'blur' }
          ],
          linkStreet: [
            { required: true, message: '通信地址-街道不能为空', trigger: 'blur' }
          ],
          linkHouseNo: [
            { required: true, message: '通信地址-门牌号不能为空', trigger: 'blur' }
          ],
          linkZipCode: [
            { required: true, message: '通信地址-邮编不能为空', trigger: 'blur' }
          ],
          legalPerson: [
            { required: true, message: '法定代表人姓名不能为空', trigger: 'blur' }
          ],
          categoryCode: [
            { required: true, message: '行业类别代码不能为空', trigger: 'blur' }
          ],
          categoryName: [
            { required: true, message: '行业类别名称不能为空', trigger: 'blur' }
          ],
          regCapital: [
            { required: true, message: '注册资本不能为空', trigger: 'blur' }
          ],
          currency: [
            { required: true, message: '币种不能为空', trigger: 'blur' }
          ],
          contactName: [
            { required: true, message: '联系人姓名不能为空', trigger: 'blur' }
          ],
          companyType: [
            { required: true, message: '公司类型不能为空', trigger: 'blur' }
          ],
          depositBank: [
            { required: true, message: '开户银行不能为空', trigger: 'blur' }
          ],
          bankAccount: [
            { required: true, message: '银行账号不能为空', trigger: 'blur' }
          ],
          setupTime: [
            { required: true, message: '成立时间不能为空', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '电子邮箱不能为空', trigger: 'blur' }
          ],
          bankCreditRating: [
            { required: true, message: '银行信用等级不能为空', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '移动电话不能为空', trigger: 'blur' }
          ],
          telphone: [
            { required: true, message: '固定电话不能为空', trigger: 'blur' }
          ],
          fax: [
            { required: true, message: '传真不能为空', trigger: 'blur' }
          ],
          companyTel: [
            { required: true, message: '公司电话不能为空', trigger: 'blur' }
          ],
          qq: [
            { required: true, message: 'QQ号码不能为空', trigger: 'blur' }
          ],
          companyUrl: [
            { required: true, message: '公司网址不能为空', trigger: 'blur' }
          ],
          remark: [
            { required: true, message: '备注不能为空', trigger: 'blur' }
          ],
          isDelete: [
            { required: true, message: '删除状态，0正常，1已删除不能为空', trigger: 'blur' }
          ],
          createOn: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          createUserId: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          createBy: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          modifiedOn: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          modifiedUserId: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ],
          modifiedBy: [
            { required: true, message: '不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    created () {
      this.getDictList()
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl(`/bid/supplier/info/${this.dataForm.id}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.dataForm.supplierName = data.supplier.supplierName
                this.dataForm.operType = data.supplier.operType
                this.dataForm.country = data.supplier.country
                this.dataForm.credentialFlag = data.supplier.credentialFlag
                this.dataForm.commercialNo = data.supplier.commercialNo
                this.dataForm.organCode = data.supplier.organCode
                this.dataForm.countryTaxNo = data.supplier.countryTaxNo
                this.dataForm.localTaxNo = data.supplier.localTaxNo
                this.dataForm.address = data.supplier.address
                this.dataForm.allAddress = data.supplier.allAddress
                this.dataForm.linkAllAddress = data.supplier.linkAllAddress
                this.dataForm.province = data.supplier.province
                this.dataForm.city = data.supplier.city
                this.dataForm.street = data.supplier.street
                this.dataForm.houseNo = data.supplier.houseNo
                this.dataForm.zipCode = data.supplier.zipCode
                this.dataForm.businessScope = data.supplier.businessScope
                this.dataForm.linkAddress = data.supplier.linkAddress
                this.dataForm.linkProvince = data.supplier.linkProvince
                this.dataForm.linkCity = data.supplier.linkCity
                this.dataForm.linkStreet = data.supplier.linkStreet
                this.dataForm.linkHouseNo = data.supplier.linkHouseNo
                this.dataForm.linkZipCode = data.supplier.linkZipCode
                this.dataForm.legalPerson = data.supplier.legalPerson
                this.dataForm.categoryCode = data.supplier.categoryCode
                this.dataForm.categoryName = data.supplier.categoryName
                this.dataForm.regCapital = data.supplier.regCapital
                this.dataForm.currency = data.supplier.currency
                this.dataForm.contactName = data.supplier.contactName
                this.dataForm.companyType = data.supplier.companyType
                this.dataForm.depositBank = data.supplier.depositBank
                this.dataForm.bankAccount = data.supplier.bankAccount
                this.dataForm.setupTime = data.supplier.setupTime
                this.dataForm.email = data.supplier.email
                this.dataForm.bankCreditRating = data.supplier.bankCreditRating
                this.dataForm.mobile = data.supplier.mobile
                this.dataForm.telphone = data.supplier.telphone
                this.dataForm.fax = data.supplier.fax
                this.dataForm.companyTel = data.supplier.companyTel
                this.dataForm.qq = data.supplier.qq
                this.dataForm.companyUrl = data.supplier.companyUrl
                this.dataForm.remark = data.supplier.remark
                this.dataForm.isDelete = data.supplier.isDelete
                this.dataForm.createOn = data.supplier.createOn
                this.dataForm.createUserId = data.supplier.createUserId
                this.dataForm.createBy = data.supplier.createBy
                this.dataForm.modifiedOn = data.supplier.modifiedOn
                this.dataForm.modifiedUserId = data.supplier.modifiedUserId
                this.dataForm.modifiedBy = data.supplier.modifiedBy
              }
            })
          }
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            this.$http({
              url: this.$http.adornUrl(`/bid/supplier/${!this.dataForm.id ? 'save' : 'update'}`),
              method: 'post',
              data: this.$http.adornData({
                'id': this.dataForm.id || undefined,
                'supplierName': this.dataForm.supplierName,
                'operType': this.dataForm.operType,
                'country': this.dataForm.country,
                'credentialFlag': this.dataForm.credentialFlag,
                'commercialNo': this.dataForm.commercialNo,
                'organCode': this.dataForm.organCode,
                'countryTaxNo': this.dataForm.countryTaxNo,
                'localTaxNo': this.dataForm.localTaxNo,
                'address': this.dataForm.address,
                'allAddress': this.dataForm.allAddress,
                'linkAllAddress': this.dataForm.linkAllAddress,
                'province': this.dataForm.province,
                'city': this.dataForm.city,
                'street': this.dataForm.street,
                'houseNo': this.dataForm.houseNo,
                'zipCode': this.dataForm.zipCode,
                'businessScope': this.dataForm.businessScope,
                'linkAddress': this.dataForm.linkAddress,
                'linkProvince': this.dataForm.linkProvince,
                'linkCity': this.dataForm.linkCity,
                'linkStreet': this.dataForm.linkStreet,
                'linkHouseNo': this.dataForm.linkHouseNo,
                'linkZipCode': this.dataForm.linkZipCode,
                'legalPerson': this.dataForm.legalPerson,
                'categoryCode': this.dataForm.categoryCode,
                'categoryName': this.dataForm.categoryName,
                'regCapital': this.dataForm.regCapital,
                'currency': this.dataForm.currency,
                'contactName': this.dataForm.contactName,
                'companyType': this.dataForm.companyType,
                'depositBank': this.dataForm.depositBank,
                'bankAccount': this.dataForm.bankAccount,
                'setupTime': this.dataForm.setupTime,
                'email': this.dataForm.email,
                'bankCreditRating': this.dataForm.bankCreditRating,
                'mobile': this.dataForm.mobile,
                'telphone': this.dataForm.telphone,
                'fax': this.dataForm.fax,
                'companyTel': this.dataForm.companyTel,
                'qq': this.dataForm.qq,
                'companyUrl': this.dataForm.companyUrl,
                'remark': this.dataForm.remark,
                'isDelete': this.dataForm.isDelete,
                'createOn': this.dataForm.createOn,
                'createUserId': this.dataForm.createUserId,
                'createBy': this.dataForm.createBy,
                'modifiedOn': this.dataForm.modifiedOn,
                'modifiedUserId': this.dataForm.modifiedUserId,
                'modifiedBy': this.dataForm.modifiedBy
              })
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$emit('refreshDataList')
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      },
      handleAreaChange (value) {
        this.dataForm.province = value[0]
        this.dataForm.city = value[1]
        this.dataForm.street = value[2]
        // this.dataForm.zipCode = value[2]
        this.address = this.$refs['cascaderAdd'].currentLabels
        this.dataForm.allAddress = this.address[0] + '/' + this.address[1] + '/' + this.address[2]
      },
      handleLinkAreaChange (value) {
        this.dataForm.linkProvince = value[0]
        this.dataForm.linkCity = value[1]
        this.dataForm.linkStreet = value[2]
        // this.dataForm.linkZipCode = value[2]
        this.linkaddress = this.$refs['cascaderAddrLink'].currentLabels
        this.dataForm.LinkAllAddress = this.linkaddress[0] + '/' + this.linkaddress[1] + '/' + this.linkaddress[2]
      },
      getDictList () {
        supplierApi.getDictList().then(({data}) => {
          if (data && data.code === 0) {
            this.getCityList(data.gaodeMapChinaAreas)
          }
        }).catch(err => {
          console.error(err)
        })
      },
      getCityList (val) {
        let resultData = JSON.parse(val)
        let countstr = JSON.stringify(resultData.districts[0].districts)
        // eslint-disable-next-line no-useless-escape
        countstr = countstr.replace(/\,\"districts\"\:\[\]/g, '')
        this.countryoptions = JSON.parse(countstr)
      }
    }
  }
</script>
